<template>
    <main class="page-bg" id="canvasDom">
        <main class="main-bg"></main>
        <header class="header flex-center">数据资源系统</header>
        <ScreenshotKit :downloadName="'数据资源系统'" />
        <main class="content-main">
            <section class="main-one">
                <n-grid :x-gap="0" :cols="3">
                    <n-gi>
                        <section class="three-row">
                            <section class="corner">
                                <span class="corner-top-left"></span>
                                <span class="corner-top-right"></span>
                                <span class="corner-bottom-left"></span>
                                <span class="corner-bottom-right"></span>
                            </section>
                            <header class="row-title flex-center">下载量统计</header>
                            <BaseLine v-if="show" :canvasHeight="180" :data="blData" />
                        </section>
                    </n-gi>
                    <n-gi>
                        <section class="three-row">
                            <section class="corner">
                                <span class="corner-top-left"></span>
                                <span class="corner-top-right"></span>
                                <span class="corner-bottom-left"></span>
                                <span class="corner-bottom-right"></span>
                            </section>
                            <header class="row-title flex-center">访问量统计</header>
                            <DoubleLine v-if="show" :canvasHeight="180" :data="dlData" />
                        </section>
                    </n-gi>
                    <n-gi>
                        <section class="three-row">
                            <section class="corner">
                                <span class="corner-top-left"></span>
                                <span class="corner-top-right"></span>
                                <span class="corner-bottom-left"></span>
                                <span class="corner-bottom-right"></span>
                            </section>
                            <header class="row-title flex-center">在线量统计</header>
                            <LineBar v-if="show" :canvasHeight="180" :data="lbData"  />
                        </section>
                    </n-gi>
                </n-grid>
            </section>
            <section class="main-two">
                <n-grid :cols="12" item-responsive responsive="screen">
                    <n-grid-item span="0 m:5 l:5">
                        <section class="cb-box">
                            <CrossBar  v-if="show" :canvasHeight="280" :data="cbData" />
                        </section>
                    </n-grid-item>
                    
                    <n-grid-item span="0 m:3 l:3">
                        <section class="row-two">
                            <n-grid x-gap="8" :cols="2">
                                <n-gi class="row-two-box flex-center" v-for="i in 8" :key="i">
                                    <span>1,234,123</span>
                                    <span>活跃用户</span>
                                </n-gi>
                            </n-grid>
                        </section>
                    </n-grid-item>

                    <n-grid-item span="0 m:4 l:4">
                        <section class="rose-box">
                            <RosePie v-if="show" :canvasHeight="280" :data="rpData" />
                        </section>
                    </n-grid-item>
                </n-grid>
            </section>
            <section class="table-box">
                <header class="table-head">系统用户统计</header>
                <n-data-table 
                    size="small"
                    :columns="columns" 
                    :data="data" 
                    :bordered="false"
                    :scroll-x="1800"
                    :style="{ height: `${height}px` }"
                    flex-height
                    :row-class-name="rowClassName"
                />
            </section>
        </main>
    </main>
</template>

<script setup lang="ts">
import { ref, reactive, h } from 'vue'
import ScreenshotKit from '@/components/common/ScreenshotKit.vue';
import BaseLine from '@/components/charts5/BaseLine.vue'
import DoubleLine from '@/components/charts5/DoubleLine.vue'
import LineBar from '@/components/charts5/LineBar.vue'
import CrossBar from '@/components/charts5/CrossBar.vue'
import RosePie from '@/components/charts5/RosePie.vue'
import { NTag, NButton, useMessage } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
const show = ref(false)
let blData = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<object>>[] 
})
let dlData = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<object>>[] 
})
let lbData = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<object>>[] 
})
let cbData = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<object>>[] 
})
let rpData = reactive({
    seriesDataList: <Array<object>>[] 
})
type RowData = {
  key: number
  name: string
  age: number
  address: string
  tags: string[]
}
const createColumns = ():DataTableColumns<RowData> => {
  return [
    { title: 'Name', key: 'name' },
    { title: 'Age', key: 'age', width: 80 },
    { title: 'Address', key: 'address',ellipsis: { tooltip: true } },
    { title: 'Remark', key: 'remark' },
    { title: 'Tags', key: 'tags',
      render (row) {
        const tags = row.tags.map((tagKey) => {
          return h(
            NTag,
            {
              style: {
                marginRight: '6px',
                color: '#fff'
              },
              type: 'info',
              bordered: false
            },
            {
              default: () => tagKey
            }
          )
        })
        return tags
      }
    },
    { title: 'Action', key: 'actions',
      render (row) {
        return h(
          NButton,
          {
            size: 'small',
            color: '#28e7de',
            textColor: '#253954',
            onClick: () => {}
          },
          { default: () => 'Send Email' }
        )
      }
    }
  ]
}

let data = reactive(<Array<object>>[])
let columns = reactive(<TableColumn<RowData>>[]) 
let height = ref(500)
let rowClassName = (row: RowData) => {
    return 'row-data'
}
const init = () => {
    let list = [], list2 = [], list3 = []
    let weeks = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    for (let index = 0; index < 7; index++) {
        let inum = Math.floor(Math.random() * (1000 - 1 + 1)) + 1;
        list.push(inum)
        list2.push(inum * (index+1))
        list3.push((inum+2)/2)
    }
    blData.xAxisDataList.push(...weeks)
    blData.seriesDataList.push(...list)

    dlData.xAxisDataList.push(...weeks)
    dlData.seriesDataList = [
        {
            name: "白天",
            data: [...list],
            type: 'line',
            areaStyle: { color: "#1e566f"},
            smooth: true
        },
        {
            name: "晚上",
            data: [...list2],
            type: 'line',
            areaStyle: { color: "#2a617c"},
            smooth: true
        }
    ]

    lbData.xAxisDataList.push(...weeks)
    lbData.seriesDataList = [
        { name: '白天', type: 'bar', data: list },
        { name: '晚上', type: 'bar', data: list2.map(m => m*1.5) },
        { name: '占比', type: 'line', yAxisIndex: 1, data: list3 }
    ]

    cbData.xAxisDataList.push(...weeks)
    cbData.seriesDataList.push(...list2) 

    rpData.seriesDataList = [
        { value: 40, name: '来源占比 1' },
        { value: 38, name: '来源占比 2' },
        { value: 32, name: '来源占比 3' },
        { value: 30, name: '来源占比 4' },
        { value: 28, name: '来源占比 5' },
        { value: 26, name: '来源占比 6' },
        { value: 22, name: '来源占比 7' },
        { value: 18, name: '来源占比 8' }
    ]

    show.value = true
    columns = createColumns()
    for (let index = 0; index < 10; index++) {
        let obj = {
            key: index,
            name: 'John Brown'+index,
            age: 32+index,
            address: '中国的硅谷 贵州省威宁县二塘镇下辖村 贵州铜仁市印江县杨柳镇中山村 贵州遵义余庆县子营街道中关村'+index,
            tags: ['nice', 'developer'],
            remark: "按钮需要被渲染为什么标签"+index
        }
        data.push(obj)
    }
}
init()
</script>

<style scoped>
.page-bg {
    width: 100%;
    background-color: #1d344b;
    position: relative;
    padding-bottom: 50px;
}
.main-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    right:50%;
    transform: translate(-50%,-50%);
    width: 1000px;
    height: 1000px;
    background-color: #25395460;
    border-radius: 50%;
    border: 1px solid #253954;
    box-shadow: 0 0 100px #506277;
    z-index: 0;
    /* transform: scale(1.5) */
}
.header {
    width: 20%;
    height: 8vh;
    margin: 0 auto;
    color: #bbe2f4;
    font-size: 24px;
    font-weight: 600;
    border: 1px solid #2bacb6;
    border-radius: 0 0 8px 8px;
    position: relative;
}
.header:before {
    content: "";
    width: 60px;
    height: 3px;
    background-color: #28e7de;
    position: absolute;
    top: 8vh;
    left: 20px;
    margin-top: -3px;
}
.header:after {
    content: "";
    width: 60px;
    height: 3px;
    background-color: #28e7de;
    position: absolute;
    top: 8vh;
    right: 20px;
    margin-top: -3px;
}
.three-row {
    /* width: 100%; */
    margin: 20px;
    height: 225px;
    background-color: #174e61;
    border: 2px solid #1e5a6e;
    position: relative;
    border-radius: 8px;
}
.corner {
    width: 100%;
    position: relative;
    top: 0;
    z-index: 1;
}
.corner-top-left {
    width: 20px;
    height: 40px;
    display: inline-block;
    border-left: 4px solid #11cb92;
    border-top: 4px solid #11cb92;
    border-radius: 8px 0 0 0;
    margin-left: -4px;
    margin-top: -4px;
}
.corner-top-right {
    width: 15px;
    height: 15px;
    display: inline-block;
    border-right: 4px solid #11cb92;
    border-top: 4px solid #11cb92;
    position: absolute;
    top: -5px;
    right: 0;
    left: 98%;
    border-radius: 0 8px 0 0;
}
.corner-bottom-left {
    width: 15px;
    height: 15px;
    display: inline-block;
    border-left: 4px solid #11cb92;
    border-bottom: 4px solid #11cb92;
    position: absolute;
    top: 210px;
    right: 0;
    left: 0;
    border-radius: 0 0 0 8px;
    margin-left: -4px;
    margin-bottom: -4px;
}
.corner-bottom-right {
    width: 60px;
    height: 20px;
    display: inline-block;
    border-right: 4px solid #11cb92;
    border-bottom: 4px solid #11cb92;
    position: absolute;
    left: 90%;
    top: 207px;
    border-radius: 0 0 8px 0;
}
.row-title {
    width: 100%;
    height: 30px;
    color: #11cb92;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    margin-top: -40px;
    position: relative;
}
.row-title:before {
    content: "";
    width: 30px;
    height: 2px;
    background-color: #28e7de;
    position: absolute;
    top: 30px;
    left: 30%;
    border-radius: 16px;
}
.row-title:after {
    content: "";
    width: 30px;
    height: 2px;
    background-color: #28e7de;
    position: absolute;
    top: 30px;
    right: 30%;
    border-radius: 16px;
}
.main-two {
    width: 100%;
    min-height: 100px;
    position: relative;
}
.cb-box {
    margin: 20px;
    margin-right: 0;
    background-color: #16495c;
    border-radius: 16px;
}
.row-two {
    margin: 20px;
}
.row-two-box {
    width: 100%;
    height: 60px;
    border: 1px solid #11cb92;
    border-radius: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.row-two-box span:first-child {
    width: 100%;
    line-height: 20px;
    display: inline-block;
    text-align: center;;
    color: #c39764;
    font-size: 18px;
}
.row-two-box span:last-child {
    width: 100%;
    line-height: 20px;
    display: inline-block;
    text-align: center;;
    color: #bec7d0;
    font-size: 14px;
}
.rose-box {
    margin: 20px;
    margin-left: 0;
    background-color: #16495c;
    border-radius: 16px;
}
.table-box {
    margin: 0 20px;
    padding: 0 10px 20px 10px;
    background-color: #16495c;
    border-radius: 16px;
    position: relative;
    z-index: 1;
}
.table-head {
    width: 100%;
    line-height: 40px;
    letter-spacing: 2px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #fefefe;
    padding: 10px 0;
}
.row-data {
    background-color: #16495c;
    color: '#ff0000'
}

:deep(.row-data td) {
    background-color: #16495c;
    color: #fefefe;
    border-bottom: 1px solid #16495c;
}
:deep(.n-data-table .n-data-table-th) {
    background-color: #253954;
    color: #fefefe;
    border-bottom: 1px solid #253954;
}
:deep(.n-data-table.n-data-table--bottom-bordered .n-data-table-td.n-data-table-td--last-row) {
    border: 1px solid #16495c;
}
:deep(.n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td) {
    background-color: #16495c;
    color: #fefefe;
}
@media (min-width: 1280px) {
    .corner-bottom-right {
        width: 60px;
        height: 20px;
        display: inline-block;
        border-right: 4px solid #11cb92;
        border-bottom: 4px solid #11cb92;
        position: absolute;
        left: 87%;
        top: 207px;
        border-radius: 0 0 8px 0;
    }
}
</style>
